<div id="example_multiplegrid">
    <div class="yu-search">
        <el-form :inline="true">
            <el-form-item>
                <el-input @keyup.enter.native="queryMainGridFn" v-model="mainGrid.query.title" placeholder="标题" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker type="date" format="yyyy-MM-dd" v-model="mainGrid.query.create_at" placeholder="时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="mainGrid.query.type" placeholder="类型">
                    <el-option v-for="item in typeOptions" :key="item.key" :value="item.key" :label="item.value+'('+item.key+')'"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="queryMainGridFn">搜索</el-button>
                <el-button type="primary" icon="information" @click="resetQueryCondFn">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table ref="mytable" :data="mainGrid.data" v-loading="mainGrid.loading" @selection-change="selectionChangeFn"
              :max-height="height" stripe border fit highlight-current-row element-loading-text="加载中...">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column prop="id" label="ID" width="75"></el-table-column>
        <el-table-column prop="title" label="标题" sortable width="260"></el-table-column>
        <el-table-column label="一级表头" align="center">
            <el-table-column prop="create_at" label="时间" width="110"></el-table-column>
            <el-table-column prop="type" label="类型" width="110">
                <template scope="scope">
                    {{scope.row.type | typeFilter}}
                </template>
            </el-table-column>
            <el-table-column label="参与人" align="center">
                <el-table-column prop="author" label="作者" width="90"></el-table-column>
                <el-table-column label="审核人" width="90">
                    <template scope="scope">
                        <span style='color:red;'>{{scope.row.auditor}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="二级表头" align="center">
                <el-table-column prop="pageviews" label="阅读数" ></el-table-column>
                <el-table-column label="状态" width="110">
                    <template scope="scope">
                        <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table-column>
    </el-table>
    <div v-show="!mainGrid.loading" class="pagination-container">
        <el-pagination :total="mainGrid.total" :current-page.sync="mainGrid.paging.start" :page-size="mainGrid.paging.size"
                       @size-change="sizeChangeFn" @current-change="startChangeFn" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</div>